import React,{Component} from 'react';
import { 
	StyleSheet, 
	View, 
	Text, 
	Image,
	FlatList,
	TouchableOpacity 
} from 'react-native';
import DatePicker from 'react-native-datepicker';

class HeaderDatepicker extends Component{
    constructor(props){
		super(props);
		this.state = {
            dateValue: props.dateValue,
            currentDate:props.currentDate
        };
	}
	componentWillReceiveProps(nextProps) {
        this.setState({dateValue: nextProps.dateValue});
        this.setState({currentDate: nextProps.currentDate});

    }

	render(){
        
		let minDate="2000-01-01";
		let maxDate="2099-01-01";
		if(this.state.dateValue){
			minDate=this.state.dateValue.minDate;
			maxDate=this.state.dateValue.maxDate;
		}

		return(
			<View style={[styles.topCenterWraper,this.props.styles]}>
				<TouchableOpacity>
					<DatePicker
				        date= {this.state.currentDate}
				        mode='date'
				        format='YYYY-MM-DD'
				        minDate={minDate}
				        maxDate={maxDate}
				        confirmBtnText="确定"
				        cancelBtnText="取消"
				        locale="zh-Hans"
				        iconSource={require("../assets/images/datepicker_icon.png")}
				        customStyles={{
							dateIcon: {
								width:22,
								height:22,
								marginLeft:-8
							},
							dateInput: {
								borderWidth:0
							},
							dateText:{
								color:'#fff',
								fontSize:18
							},
							btnTextConfirm:{
								color:"#f54545"
							}
				            // ... You can check the source to find the other keys.
				        }}
				        onDateChange={(date) => {
				        	this.setState({currentDate: date});
				        	this.props.onDateChange(date);
				        }}
			        />
			    </TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	topCenterWraper:{
		flex:1,
		flexDirection:'row',
		justifyContent:'center',
		alignItems:'center'
	},
})

export { HeaderDatepicker }

